<template>
    <page-layout>
        <template v-slot:header>
            <el-button @click="saveEvt" type="primary" size="small">保存</el-button>
            <el-button @click="cancelEvt" type="primary" plain size="small">取消</el-button>
        </template>
        <el-form :model="page" 
                :rules="rules" 
                size="small"
                ref="ruleForm" 
                label-width="100px" 
                class="demo-ruleForm"
                :inline-message="true">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="运营名字" prop="name">
                            <el-input v-model="page.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="产品名字" prop="product_name">
                            <el-select  @change="selectEvt(page)"  v-model="page.product_name" placeholder="请选择">
                                <el-option
                                v-for="item in productList "
                                :key="item.product_name"
                                :label="item.label"
                                :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="运营价格" prop="price">
                                <el-input v-model="page.price"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="成本价格" prop="pure_price">
                            <el-input v-model="page.pure_price"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="投放数量" prop="count">
                            <el-input v-model="page.count"/>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="限购数量" prop="limit">
                            <el-input v-model="page.limit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="开售时间" prop="sale_stime">
                            <el-input placeholder="选择开售时间" type="date" disabled v-model="page.sale_stime"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="下架时间" prop="sale_etime">
                            <el-input placeholder="选择下架时间" type="date" disabled v-model="page.sale_etime"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="运营区域" prop="address">
                            <el-input v-model="page.address"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="page.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
    </page-layout>
</template>
<script>
import { productListApi, rangeAddApi, rangeUpdateApi } from '@/apis/productApi'
export default {
    data() {
        return {
            page:{
                address:'',
                name:'',
                product_name:'',
                price:'',
                pure_price:'',
                count:'',
                limit:'',
                sale_stime:'',
                sale_etime:'',
                place:'',
                remark:'',
                product_id:''
            },
            query:{
                page:1,
                size:100,
                name:''
            },
            productList:[],
            rules:{
                name:[{required:true,message:'运营名字必填'}],
                pure_price:[{required:true,message:'成本价必填'}],
                price:[{required:true,message:'运营价必填'}],
                count:[{required:true,message:'投放数量必填'}],
                limit:[{required:true,message:'限购数量必填'}],
                address:[{required:true,message:'运营区域必填'}],
                product_id:[{required:true,message:'产品id必填'}],
            },
            rangeInfo:[],
            productNameList:[]
        }
    },
   async mounted(){
        this.rangeInfo=await this.$store.getters['common/rangeInfo']
        let result = await productListApi(this.query)
        if(result.code===200){
            this.productList=result.data.rows.map(it=>{
                    it.value=it.name
                    it.label=it.name
                    return it
                    }
                )
        }
        if(localStorage.getItem('rangeFlagTwo')==='false')
        {
            this.page=this.$store.getters['common/rangeList']
            localStorage.setItem('rangeType','edit')
        }
        else{
            localStorage.setItem('rangeType','update')
        }
        localStorage.removeItem('rangeFlagTwo')
    },
    methods:{
        async selectEvt(it){
           let select = await this.productList.find(item=>item.name===it.product_name)
           this.page.product_id= select.id
           this.page.sale_stime= select.sale_stime
           this.page.sale_etime= select.sale_etime
        },
        saveEvt(){
            if(localStorage.getItem('rangeType')==='edit'){
                 console.log('更新update')
                rangeUpdateApi(this.page).then(d=>{
                    if(d.code===200){
                       console.log(d) 
                    this.$message({
                        message: '编辑经营信息成功!',
                        type: 'success',
                        center:true
                    })
                    setTimeout(()=>{
                        this.$router.push('/product/range/list')
                    },100)
                       
                    }
                }).catch(e=>{
                    console.log(e)
                    this.$message.error('编辑经营信息失败')
                })
            }
            else if(localStorage.getItem('rangeType')==='update'){
                console.log('新增add')
                rangeAddApi(this.page).then(d=>{
                    if(d.code===200){
                       console.log(d) 
                    this.$message({
                        message: '新增经营信息成功!',
                        type: 'success',
                        center:true
                    })
                    setTimeout(()=>{
                        this.$router.push('/product/range/list') 
                    },100)
                    }
                }).catch(e=>{
                    console.log(e)
                    this.$message.error('新增经营信息失败')
                })
            }
        },
        cancelEvt(){
            if(confirm('你确定不保存运营范围信息吗')){
                 this.$router.go(-1)
            }
        }
    }
}
</script>